<script setup>
import { ref, watch, reactive } from "vue";
let sum = ref(0);
let msg = ref('你好啊');
let person = reactive({
    name: '德玛西亚',
    age: 18,
    job: {
        j1: {
            salary: 10
        }
    }
})

// 情况一：监视ref所定义的一个响应式数据
// watch(sum, (newValue, oldValue) => {
//     console.log('sum变化了', newValue, oldValue)
// }, { immediate: true })

// 情况二：监视ref所定义的多个响应式数据
// watch([sum, msg], (newValue, oldValue)=>{
//     console.log('sum或msg变化了', newValue, oldValue)
// }, { immediate: true })


/*
* 情况三：监视reactive所定义的一个响应式数据。
*       1、注意：此处无法获取oldValue
*       2、注意：强制开启了深度监视（deep配置无效）
*/
// watch(person, (newValue, oldValue)=>{
//     console.log('person变化了', newValue, oldValue)
// }, { deep: false })  // 此处的deep配置无效

// 情况四：监视reactive所定义的一个响应式数据中的某个属性
// watch(()=>person.age, (newValue, oldValue)=>{
//     console.log('person的age变化了', newValue, oldValue)
// })

// 情况五：监视reactive所定义的一个响应式数据中的某些属性
// watch([()=>person.age, ()=>person.name], (newValue, oldValue)=>{
//     console.log('person的age或name变化了', newValue, oldValue)
// })

// 特殊情况
watch(()=>person.job, (newValue, oldValue)=>{
    console.log('person的age变化了', newValue, oldValue)
}, {deep: true})


</script>

<template>
    <h1>当前求和为{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
    <hr />
    <h1>当前信息为{{ msg }}</h1>
    <button @click="msg += '!'">修改信息</button>
    <hr>
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>薪资：{{ person.job.j1.salary }}k</h1>

    <button @click="person.name += '@'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
    <button @click="person.job.j1.salary ++">修改薪资</button>
</template>
